<template xmlns:background-color="http://www.w3.org/1999/xhtml">
  <div>
    <a-row type="flex">
      <a-col :span="4">
        <DeviceTree ref="refDeviceTree" :treeData="treeData" @departSelected="departSelected"></DeviceTree>
      </a-col>
      <a-col :span="20">
        <div>
          <div>
            <a-row>
              <a-col :span="24">
                <a-button v-if="loading" type="primary" loading /><a-button @click="onAllDeviceClick">所有设备</a-button>
              </a-col>
            </a-row>
          </div>
          <div class="deviceCardList">
            <a-row>
              <template v-for="(item, index) of deviceDataList">
                <a-col :span="6" v-bind:key="item.id + '_#device'">
                  <DeviceBoxSimple :deviceObj="item" @showDetail="deviceSelected"></DeviceBoxSimple>
                </a-col>
              </template>
            </a-row>
          </div>
          <DeviceDetailBoxModal ref="detailBoxModal"></DeviceDetailBoxModal>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>

const ddd = {
  baseinfo: {},
  warning: {}
}
import DeviceTree from './modules/DeviceTree'
import DeviceBoxSimple from './modules/DeviceBoxSimple';
import { getDepartDevicesTree, getDepartDevicesTreeDetail } from '@/api/deviceApi'
import { isNull, isUndefined } from 'lodash';
import { WebSocketDeviceListMixins } from '@/mixins/tiger/WebSocketDeviceListMixins'
import store from '@/store/'
import DeviceDetailBoxModal from './modules/DeviceDetailBoxModal'


const searchParam = {
  departId: null,
  deviceId: null
};

export default {
  name: 'DeviceMngTree',
  mixins: [WebSocketDeviceListMixins],
  components: {
    DeviceBoxSimple,
    DeviceTree,
    DeviceDetailBoxModal,
  },
  data() {
    return {
      loading: false,
      searchVal: searchParam,
      treeData: new Array(),
      deviceDataList: new Array(),
      deviceIdList: new Array(), //element 1 是id拼接
      socketConnId: "",
      sampleData: ddd,
      selDevice: { id: 0 },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      orgCategoryDisabled: false,
    }
  },

  computed: {},
  methods: {
    loadData() {
      if (!isUndefined(this.$refs.refDeviceTree))
        this.$refs.refDeviceTree.loadTreeItem();
      this.loadDevices();
    },
    initDeviceSocket() {
      let time = new Date();
      var userId = store.getters.userInfo.id + '_' + time.getSeconds();
      let departId = store.getters.userInfo.departIds;
      this.socketConnId = userId;
      this.searchVal.departId = departId;
      if (isUndefined(userId))
        return;
      this.initWebSocket(userId);
    },
    sendDataToDeviceSocket(text) {
      this.websocketSend(text);
    },
    resolveData(deviceData) {
      let index = this.deviceIdList.indexOf(deviceData.id);
      this.deviceDataList[index].switches = deviceData.switches;
      this.deviceDataList[index].baseinfo = deviceData.baseinfo;
      this.deviceDataList[index].warning = deviceData.warning;
      this.deviceDataList[index].timestamp = deviceData.timestamp;
      // console.log(deviceData);
    },
    departSelected(depart) {
      if (depart.type == 1) { //device
        let key = depart.key;
        let index = this.deviceIdList.indexOf(key);
        if (index >= 0) {
          this.$refs.detailBoxModal.view(this.deviceDataList[index]);
        }
      } else if (depart.type == 0) {
        this.searchVal.departId = depart.key;
        this.loadDevices();
      } else {
        return;
      }
    },
    deviceSelected(device) {
      if (!isUndefined(device)) {
        if (device.baseinfo.isOnline == 0) {
          this.$message.info("设备不在线");
          return; //离线不能查看详情
        }
      }
      this.$refs.detailBoxModal.view(device);
    },
    onAllDeviceClick(){
      this.searchVal.departId = null;
      this.loadDevices();
    },
    loadDevices() {
      let that = this;
      this.loading = true;
      getDepartDevicesTreeDetail(this.searchVal).then((res) => {
        if (res.success) {
          that.deviceIdList = [];
          that.deviceDataList = [];
          let idStr = "";
          res.result.filter(d => {
            d.shadowName = JSON.parse(d.shadowName);
            if (!isUndefined(d.shadowName.id) && d.shadowName.id != "") {
              that.deviceDataList.push(d.shadowName);
              that.deviceIdList.push(d.id);
              idStr += ((idStr.length == 0 ? "" : ",") + d.id);
            }
          });
          that.sendDataToDeviceSocket(JSON.stringify({ cmd: "resetDevices", devices: idStr, id: that.socketConnId }));
        }
      }).finally(() => {
        this.loading = false
      });
    },
  },
  mounted() {
    this.initDeviceSocket();
    this.loadData();
  },
  destroyed() {
    this.closeWS();
  },
  watch: {

  }
}
</script>
<style scoped>

</style>